<template>
	<!-- @tap="jumpTo('/pages/home/detail?id=' + shops.id)" -->
	<view class="my-shops" >
		<image @tap="jumpTo('/pages/home/detail?id=' + shops.id)" class="logo" :src="shops.logo|| '/static/default_shop_log.png'" mode="aspectFill"></image>
		<view class="info">
			<view class="name text-cut">
				<text class="name-title">{{ nameText(shops)}}</text>
				<text class="text-samll" v-if="shops.distance">{{shops.distance}}</text>
			</view>
			<!-- <my-stars></my-stars> -->
			<view class="shop-tel">
				<!-- <image src="../static/tell.png" mode=""></image> -->
				<text class="cuIcon-dianhua"></text>
				<text>{{shops.tel?shops.tel:'暂无'}}</text>
			</view>
			<view class="discount">
				<text class="discount-btn-agree" v-if="shops.alliance_status==0 && shops.check_alliance_id==shops.alliance_id"
					@tap="allianceJoin(shops.id,1)">同意</text>
				<!-- <text class="discount-btn" v-if="shops.alliance_status==1">已加入</text> -->


				<text class="discount-btn" v-if="shops.alliance_status==0 && shops.check_alliance_id==shops.alliance_id" @tap="allianceJoin(shops.id,-1)">拒绝</text>
				<!-- <text class="discount-btn" v-if="shops.alliance_status==-1">已拒绝</text> -->



				<!-- <text v-if="shops.discount > 0 && shops.discount < 100">
          <text class="discount-text" >优惠券</text>
          <text class="discount-text" v-if="shops.rebate==1">抵扣{{(100 - shops.discount * 1).toFixed(2)}}%</text>
        </text> -->
				<!-- <text v-else class="discount-text">无折扣</text> -->
				<!-- <text class="discount-btn">进店</text> -->
				<!-- <view class="coupon" v-if="shops.discount > 0 && shops.discount < 100">
					优惠券可抵扣{{(100 - shops.discount * 1).toFixed(2)}}%
				</view>
				<view class="coupon" v-else>
					无折扣
				</view>
				<view class="distance" v-if="shops.distance">
					{{shops.distance}}
				</view> -->
			</view>
			<view class="address text-cut" v-if="shops.address">
				<text class="icon cuIcon-locationfill"></text>{{shops.address}}
			</view>
			<view class="address text-cut" v-else>
				<text class="icon cuIcon-locationfill"></text>{{shops.province}}{{shops.city}}
			</view>


		</view>
	</view>
</template>

<script>
	import shop from '@/api/shop.js';
	import MyStars from "@/components/MyStars";
	export default {
		name: 'MyShops',
		props: {
			shops: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			MyStars
		},
		methods: {
			allianceJoin(id, chain_status) {
				shop.allianceJoin({
					id: id,
					alliance_status: chain_status
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: '添加成功'
						})
						this.$emit('update',id);
						// this.loadData()
					} else {

					}
				})
			},
			nameText(item) {
				const shortName = item.short_name ? item.short_name.trim() : '';
				const title = item.title ? item.title.trim() : '';
				return shortName && shortName != 'null' ? shortName : title;
			},
			callTel(tel) {
				if (!tel) {
					this.toast('暂无联系电话');
					return;
				}
				uni.makePhoneCall({
					phoneNumber: tel
				});
			}
		}
	}
</script>

<style lang="less">
	.my-shops {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 10px;
		border-radius: 5px;
		margin-bottom: 10px;
		position: relative;

		.logo {
			width: 90px;
			min-width: 90px;
			height: 80px;
			border-radius: 6px;
			margin-right: 10px;
		}

		.info {
			width: 100%;
			overflow: hidden;
			flex: 0 1 auto;

			.name {
				height: 30px;
				line-height: 30px;
				font-size: 15px;
			}

			.text-samll {
				font-size: 12px;
				color: #BABABA;
				position: absolute;
				right: 10px;
			}

			.name-title {
				display: inline-block;
				width: 80%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
			}

			.discount {
				display: flex;
				align-items: center;
				padding: 5px 0 8px 0;

				.coupon {
					height: 20px;
					padding: 0 10px;
					line-height: 20px;
					text-align: center;
					border-radius: 2px;
					background-image: -webkit-linear-gradient(45deg, #ff9700, #ed1c24);
					background-image: linear-gradient(45deg, #ff9700, #ed1c24);
					color: #ffffff;
					font-size: 13px;
				}

				.distance {
					flex: 1;
					height: 20px;
					line-height: 20px;
					color: #999;
					text-align: right;
					font-size: 13px;
				}

				.discount-text {
					font-size: 12px;
					color: #FE4E5B;
					border: 1px solid #FE4E5B;
					border-radius: 4px;
					padding: 0 4px;
					margin-right: 10px;
				}

				.discount-btn-agree {
					position: absolute;
					right: 60px;
					bottom:40px;
					background: #FE4E5B;
					color: #fff;
					border-radius: 4px;
					font-size: 13px;
					padding: 2px 6px 4px;
				}

				.discount-btn {
					position: absolute;
					right: 10px;
					bottom:40px;
					background: #FE4E5B;
					color: #fff;
					border-radius: 4px;
					font-size: 13px;
					padding: 0px 6px 4px;
				}
			}

			.address {
				height: 20px;
				line-height: 20px;
				color: #999;
				font-size: 12px;

				.icon {
					color: #0081ff;
				}
			}
		}
	}

	.my-shops {
		border-top: 1px solid #eee;
	}

	.shop-tel {
		font-size: 13px;

		.cuIcon-dianhua {
			font-size: 28rpx;
			color: #5c5c5c;
			padding-right: 5rpx;
		}
	}
</style>
